<template>
    <div class="contract-form">
        <!-- 基本信息 -->
        <h3>基本信息</h3>
        <el-form :model="form" label-width="120px" class="basic-info">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="所属小区">
                        <el-input v-model="form.communityName" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="广告位编号">
                        <el-input v-model="form.advertisingCode" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="收费金额">
                        <el-input v-model="form.advertisingPrice" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="租赁方">
                        <el-input v-model="form.leaseName" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人">
                        <el-input v-model="form.leaseName" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系电话">
                        <el-input v-model="form.leasePhone" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="广告位名称">
                        <el-input v-model="form.advertisingName" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="广告位位置">
                        <el-input v-model="form.advertisingPosition" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="广告位大小">
                        <el-input v-model="form.advertisingSize" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!-- 合同信息 -->
        <h3>合同信息</h3>
        <el-form :model="form" label-width="120px" class="contract-info">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="合同编号">
                        <el-input v-model="form.contractNumber" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="承租方姓名">
                        <el-input v-model="form.tenantName" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="承租方电话">
                        <el-input v-model="form.tenantPhone" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="签订日期">
                        <el-input v-model="formattedSigningDate" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="租期(月)">
                        <el-input v-model.number="form.leaseTerm" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="起租日期">
                        <el-input v-model="formattedStartDate" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="到期日期">
                        <el-input v-model="formattedStopDate" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="收费面积">
                        <el-input v-model="form.collectionArea" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="押金">
                        <el-input v-model="form.deposit" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="押金说明">
                        <el-input v-model="form.depositDescription" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="备注">
                        <el-input v-model="form.remarks" disabled style="width: 100%;" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!-- 操作按钮 -->
        <div class="button-group" style="text-align: right;margin-right: 30px;">
            <el-button @click="goBack">返回</el-button>
        </div>
    </div>
</template>

<script>
import request from '@/utils/request';

export default {
    name: 'ParkingLeaseDetail',
    data() {
        return {
            feeAmount: 0,
            brokerage: 0,
            TotalAmount: 0,
            form: {
                communityName: "",
                advertisingCode: "",
                advertisingName: "",
                advertisingLocation: "",
                advertisingSize: "",
                leaseCompany: "",
                leaseName: "",
                leasePhone: "",
                tenantName: "",
                tenantPhone: "",
                legalRepresentative: "",
                collectionArea: "",
                signingDate: "",
                leaseTerm: 1,
                startDate: "",
                stopDate: "",
                depositDescription: "",
                remarks: "",
                contractNumber: "",
                deposit: 0,
                advertisingPosition: ""
            }
        }
    },
    computed: {
        formattedSigningDate() {
            return this.formatDate(this.form.signingDate);
        },
        formattedStartDate() {
            return this.formatDate(this.form.startDate);
        },
        formattedStopDate() {
            return this.formatDate(this.form.stopDate);
        }
    },
    created() {
        const id = this.$route.query.advertisingLeaseId;

        if (id) {
            this.fetchData(id);
        }
    },
    methods: {
        fetchData(id) {
            request.post(`/advertisingLease/getAdvertisingLeaseById`, { advertisingLeaseId: id })
                .then(res => {
                    this.form = res.data;
                    this.feeAmount = res.data.advertisingPrice;
                    this.brokerage = res.data.advertisingPrice; // 押金默认为单价
                    this.TotalAmount = res.data.advertisingPrice * res.data.leaseTerm;
                    this.form.deposit = res.data.advertisingPrice; // 设置押金为单价
                })
                .catch(err => {
                    console.error('获取失败:', err);
                    this.$message.error(err.message || '获取失败');
                });
        },

        // 格式化日期
        formatDate(date) {
            if (!date) return '';
            const d = new Date(date);
            return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
        },

        // 返回上一页
        goBack() {
            this.$router.go(-1);
        }
    }
}
</script>

<style scoped>
.contract-form {
    padding: 20px;
}

h3 {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
}

.basic-info,
.contract-info {
    margin-bottom: 20px;
}

.el-form-item {
    margin-bottom: 15px;
}

.button-group {
    margin-top: 20px;
}
</style>
